<template>
	<view class="min100 pb-100 bg ">
		<view class="topbox">
			<view class="flex flex-start arrbox">
				<view :class="item.active==true?'itembox':'itembox1'" @click="clickfn(item)"
					v-for="item in Collections">{{item.val}}</view>
			</view>
		</view>
		<view class="" v-if="isshow==0">
			<view class="">
				<u-dropdown @open="opennum" active-color="#000">
					<u-dropdown-item v-model="name" height='400rpx' @change="categorynum" :title=this.idd
						:options="options1num">
					</u-dropdown-item>
					<u-dropdown-item v-model="value2" @change="categorynumnew" :title=this.idprice :options="options2">
					</u-dropdown-item>
				</u-dropdown>
			</view>
			<view class="blind_cont flex plr-36">
				<view class="blind_item mt-30" v-for="item in collection_list">
					<view class="blind_item_img" @click="goDetails(item)">
						<image :src="item.image" class="circulation" mode="widthFix"></image>
						<view class="item_circulation size-20">流通：{{item.surplus}}份</view>
					</view>
					<view class="item_detail plr-20">
						<view class="detail_tit size-30 mt-10">
							{{item.name}}
						</view>
						<view class="limit flex size-26 mtb-20">
							<view class=" plr-10">限量</view>
							<view class="limitnum">{{item.stock}}份</view>
						</view>
					</view>
					<view class="pricebox plr-20 ptb-20">
						￥{{item.price}}起
					</view>
				</view>
			</view>
		</view>
		<view class="" v-if="isshow==1">
			<view class="flex1">
				<u-dropdown @open="open" active-color="#000">
					<u-dropdown-item v-model="name" @change="category" :title=this.idboxall :options="options1">
					</u-dropdown-item>
					<u-dropdown-item v-model="value3" @change="categorynew" :title=this.idbox :options="options3">
					</u-dropdown-item>
				</u-dropdown>
			</view>
			<view class="blind_content plr-30">
				<view class="blind_item mt-30" v-for="item in blind_list">
					<view class="blind_item_img" @click="blind_detail(item)">
						<image :src="item.image" mode="widthFix"></image>
					</view>
					<view class="item_detail plr-20">
						<view class="detail_tit size-30 mt-10">
							{{item.name}}
						</view>
					</view>
					<view class="pricebox plr-20">
						￥{{item.price}}
					</view>
				</view>
			</view>
		</view>

		<tab></tab>
	</view>
</template>
<script>
	import tab from "../../components/tab.vue"
	export default {
		components: {
			tab
		},
		data() {
			return {
				idboxall:'全部藏品',
				idbox: '最新上架',
				idprice: '最新上架',
				idd: '全部藏品',
				titlename: '',
				id: '',
				value: '',
				name: '',
				activetab: '',
				allnew: [],
				all: [{
						id: 0,
						name: '我的关注',
						active: false
					},
					{
						id: 1,
						name: '推荐',
						active: false
					},
					{
						id: '',
						name: '全部',
						active: true
					},
				],
				item: "",
				index: '',
				value1: 1,
				value2: 1,
				value3: 1,
				// 盲盒-全部盲盒列表
				options1: [],
				// 数字藏品-全部盲盒列表
				options1num: [],
				options2: [{
						label: '最新上架',
						value: 1,
					},
					{
						label: '价格升序',
						value: 2,
					},
					{
						label: '价格降序',
						value: 3,
					},
				],
				options3: [{
						label: '最新上架',
						value: 1,
					},
					{
						label: '价格升序',
						value: 2,
					},
					{
						label: '价格降序',
						value: 3,
					},
				],
				isshow: 0,
				collection_list: [

				],
				// 寄售-盲盒列表
				blind_list: [],
				Collections: [{
						index: 0,
						val: '数字藏品',
						active: true
					},
					{
						index: 1,
						val: '盲盒',
						active: false
					}
				],
				follow: [

				],
				query: {
					time_order: '',
					price_order: '',
					page: 1,
					pagesize: 10,
					search: "",
					goods_category_id: this.index
				},
				flag: false, //上拉加载
				status: 'more',
				list: []
			}
		},
		onShow() {
			this.init();
			this.categoryList() //寄售-数字藏品-分类
			this.blindBoxnumber() //数字藏品列表
			this.blindBoxbox() //盲盒列表
			this.idd = '全部藏品'
			this.name = ''
			this.idboxall='全部藏品'
			

		},
		onHide() {
			this.list = [];
			this.flag = false;
			this.status = 'more';
			this.query = {
				time_order: '',
				price_order: '',
				page: 1,
				pagesize: 10,
				search: ""
			}
		},
		onReachBottom() {
			if (!this.flag) {
				this.status = "loading";
				this.query.page++;
				this.init();
			}
		},
		onPullDownRefresh() {
			this.flag = false;
			this.query.page = 1;
			this.list = [];
			this.init();
		},

		methods: {
			// 寄售-数字藏品-全部藏品分类
			opennum(index) {
				// console.log(index);
				this.index = index
				if (this.index == 0) {
					this.$http('api/trade/tradeGoodsListGroupV1', {

					}).then(res => {
						console.log(res.data);
						let optionsboxnum = []
						this.options1 = res.data
						res.data.forEach((item) => {
							// console.log(item.name);
							optionsboxnum.push({
								id: item.id,
								label: item.name,
								value: item.id
							})
						})
						this.options1num = optionsboxnum
						// this.options1num.unshift({
						// 	id: 0,
						// 	label: '全部藏品',
						// 	value: '',

						// })
						// console.log(this.options1num);
					})
				} else if (this.index == 1) {

				}
			},
			// 寄售-盲盒-全部盲盒分类
			open(index) {
				console.log(index);
				this.index = index
				if (this.index == 0) {
					this.$http('api/trade/tradeBoxListGroup', {}).then(res => {
						// console.log(res.data);
						let optionsbox = []
						// this.options1 = res.data
						res.data.forEach((item) => {
							// console.log(item.name);
							optionsbox.push({
								id: item.box_id,
								label: item.name,
								value: item.box_id
							})
						})
						this.options1 = optionsbox
						// this.options1.unshift({
						// 	label: '全部盲盒',
						// 	value: ''
						// })
					})
				} else if (this.index == 1) {

				}
			},
			// 数字藏品
			blindBoxnumber() {
				this.$http('api/trade/tradeGoodsListGroup', {
					time_order: '',
					price_order: '',
					page: 1,
					pagesize: 10,
					search: "",
					goods_id: this.index
				}).then(res => {
					console.log(res.data);
					this.collection_list = res.data
				})
			},
			// 盲盒
			blindBoxbox() {
				this.$http('api/trade/tradeBoxList', {
					time_order: '',
					price_order: '',
					page: 1,
					pagesize: 10,
					search: "",
				}).then(res => {
					console.log(res.data);
					this.blind_list = res.data
				})
			},
			categoryList(item) {
				this.$http('api/trade/categoryList', this.query).then(res => {
					// console.log(res);
					this.follow = res
					this.follow.forEach((item) => {
						item['active'] = false
						// console.log(this.follow);
					})
					this.all.concat(this.follow)
					this.allnew = this.all.concat(this.follow)
					// console.log(this.allnew);
				})
			},
			// 寄售-盲盒-全部盲盒点击-列表更新
			category(value) {
				console.log(value);
				this.id = value
				this.$http('api/trade/tradeBoxList', {
					time_order: '',
					price_order: '',
					page: 1,
					pagesize: 10,
					search: "",
					box_id: this.id,
				}).then(res => {
					console.log(res.data);
					this.blind_list = res.data
					this.blind_list.forEach((item) => {
						if (this.id == 0) {
							this.idboxall = '全部藏品'
						} else {
							this.idboxall = item.name
						}
						console.log(item);
					
					
					})
				})
			},
			// 寄售-数字藏品-全部藏品点击-列表更新
			categorynum(value) {
				console.log(this.options1num);
				console.log(value)
				this.id = value
				this.$http('api/trade/tradeGoodsListGroup', {
					time_order: '',
					price_order: '',
					page: 1,
					pagesize: 10,
					search: "",
					goods_id: this.id,
				}).then(res => {
					console.log(res.data);
					this.collection_list = res.data
					this.collection_list.forEach((item) => {
						if (this.id == 0) {
							this.idd = '全部藏品'
						} else {
							this.idd = item.name
						}
						console.log(item);


					})

				})
			},
			// 	// 寄售-盲盒-最新上架点击-列表更新
			categorynew(value) {
				console.log(value);
				this.idbox = value
				console.log(this.idbox)
				if (this.idbox == 1) {
					this.idbox='最新上架'
					this.$http('api/trade/tradeBoxList', {
						time_order: 1,
						price_order: '',
						page: 1,
						pagesize: 10,
						search: "",
					}).then(res => {
						console.log(res.data);
						this.blind_list = res.data
					})
				} else if (this.idbox == 2) {
					this.idbox='价格升序'
					this.$http('api/trade/tradeBoxList', {
						time_order: '',
						price_order: 1,
						page: 1,
						pagesize: 10,
						search: "",
					}).then(res => {
						console.log(res.data);
						this.blind_list = res.data
					})
				} else if (this.idbox == 3) {
					this.idbox='价格降序'
					this.$http('api/trade/tradeBoxList', {
						time_order: '',
						price_order: 2,
						page: 1,
						pagesize: 10,
						search: "",
					}).then(res => {
						console.log(res.data);
						this.blind_list = res.data
					})
				}
			},
			// 	// 寄售-数字藏品-最新上架点击-列表更新
			categorynumnew(value, ) {
				console.log(value);
				this.idprice = value
				console.log(this.id);
				if (this.idprice == 1) {
					this.idprice = '最新上架'
					console.log(this.idprice);
					this.$http('api/trade/tradeGoodsListGroup', {
						time_order: 1,
						price_order: '',
						page: 1,
						pagesize: 10,
						search: "",
						goods_id: ''
					}).then(res => {
						console.log(res.data);
						this.collection_list = res.data
					})
				} else if (this.idprice == 2) {
					this.idprice = '价格升序'
					this.$http('api/trade/tradeGoodsListGroup', {
						time_order: '',
						price_order: 1,
						page: 1,
						pagesize: 10,
						search: "",
						goods_id: ''
					}).then(res => {
						console.log(res.data);
						this.collection_list = res.data
					})
				} else if (this.idprice == 3) {
					this.idprice = '价格降序'
					this.$http('api/trade/tradeGoodsListGroup', {
						time_order: '',
						price_order: 2,
						page: 1,
						pagesize: 10,
						search: "",
						goods_id: ''
					}).then(res => {
						console.log(res.data);
						this.collection_list = res.data
					})
				}
			},
			toclassificate() {
				uni.navigateTo({
					url: 'pages/blindBox/classificate?id=' + item.id

				})
			},
			clickfn(item) {
				if (item.index == 0) {
					this.blindBoxnumber()
				} else if (item.index == 1) {
					this.blindBoxbox()
				}
				for (let i = 0; i < this.Collections.length; i++) {
					this.Collections[i].active = false
				}
				item.active = true
				this.isshow = item.index
				// console.log(this.isshow)
				// console.log(item.index)
			},
			followfn(item) {
				// console.log(item);
				this.index = item.id
				// console.log(this.index);
				for (let i = 0; i < this.allnew.length; i++) {
					this.allnew[i].active = false
				}
				item.active = true
				this.activetab = item.active
				// console.log(this.activetab);
				this.init()
			},



			init() {
				this.blindBoxnumber()
			},
			toSearch() {
				this.query.page = 1;
				this.list = [];
				this.init();
			},
			goSearch() {
				uni.navigateTo({
					url: '/pages/blindBox/search'
				})
			},
			// 拼接url
			// 寄售-藏品-详情页-
			goDetails(item) {
				uni.navigateTo({
					url: './boxDetails?id=' + item.id + '&author_name=' + item.author_name + '&author_image=' +
						item.author_image + '&image=' + item.image
				})
			},
			blind_detail(item) {
				uni.navigateTo({
					url: '/pages/blindBox/blindboxDetail?users_box_id=' + item.users_box_id
				})
			}
		}
	}
</script>
<style lang="less" scoped>
	page {
		background-color: #F5F5F5;
	}

	.blind_content {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		.blind_item {
			width: 48%;
			height: 460rpx;
			border-radius: 20rpx;
			background-color: #fff;
			position: relative;

			.pricebox {
				position: absolute;
				bottom: 20rpx;
				right: 0;
				font-weight: 600;
			}

			.blind_item_img {
				position: relative;

				image {
					width: 100%;
					border-radius: 20rpx 20rpx 0 0;
				}

				.circulation {
					width: 90%;
					position: absolute;
					bottom: 5rpx;
					left: 5%;
					z-index: 999;
				}

				.item_circulation {
					position: absolute;
					bottom: 10rpx;
					z-index: 10000;
					left: 28%;
				}
			}

			.item_detail {
				background: url(../../static/blindbox/ru1.png) no-repeat center 0rpx;
				background-position: center 0px;
				background-size: cover;

				.detail_tit {
					font-weight: 600;
				}

				.limit {
					width: 51%;
					background-color: rgb(254, 204, 173);
					justify-content: space-between;
					border-radius: 20rpx;

					.limitnum {
						background-color: rgb(253, 243, 234);
					}
				}
			}
		}
	}

	.topbox {

		padding: 40rpx;
		background-color: rgb(64, 64, 64);

		.arrbox {
			margin-top: 40rpx;
			color: #fff;

			.itembox,
			.itembox1 {
				margin-right: 20rpx;
				color: #999;
			}

			.itembox {
				color: #fff;
				font-weight: 800;
			}
		}
	}

	.classification {
		width: 100%;
		color: #333;
		background-color: #fff;

		.blind_setting {
			width: 40rpx;
		}

		.classcont {
			display: flex;
			overflow: auto;

			.classitem,
			.classitem1 {
				flex-grow: 0;
				flex-shrink: 0;
				height: 100rpx;
				line-height: 100rpx;
				padding: 0 10rpx;
			}

			.classitem {
				font-weight: 600;
				border-bottom: 10rpx solid #fda889;
			}
		}

		image {
			width: 80rpx;
		}

	}

	.blind_cont {
		width: 100%;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		.blind_item {
			width: 48%;
			height: 480rpx;
			border-radius: 20rpx;
			background-color: #fff;
			position: relative;
			z-index: 1;

			.pricebox {
				position: absolute;
				bottom: 0;
				right: 0;
				font-weight: 600;
			}

			.blind_item_img {
				position: relative;

				image {
					width: 100%;
					border-radius: 20rpx 20rpx 0 0;
				}

				.circulation {
					width: 90%;
					// position: absolute;
					bottom: 5rpx;
					left: 5%;
					z-index: 999;
				}

				.item_circulation {
					position: absolute;
					bottom: 10rpx;
					z-index: 10000;
					left: 22%;
					background-color: yellow;
					width: 200rpx;
					border-radius: 16rpx 16rpx 0 0;
					text-align: center;
					font-size: 24rpx;
					height: 40rpx;
					line-height: 40rpx;
				}
			}

			.item_detail {
				// height: 200rpx;
				background: url(../../static/blindbox/ru1.png) no-repeat center 0rpx;
				background-position: center 0px;
				background-size: cover;

				.detail_tit {
					font-weight: 600;
				}

				.limit {
					width: 51%;
					background-color: rgb(254, 204, 173);
					justify-content: space-between;
					border-radius: 20rpx;
					font-size: ;

					.limitnum {
						background-color: rgb(253, 243, 234);
					}
				}
			}
		}
	}

	::v-deep  .u-action {
		color: #333 !important;
	}

	.homeImg {
		width: 284rpx;
		height: 60rpx;
	}


	.collectImg {
		width: 100%;
		height: 690rpx;
	}

	.homeIcon {
		width: 30rpx;
		height: 30rpx;
	}

	.tipsLeft {
		background: #44ACFF;
		color: #2f2f2e;
	}

	.tipsRight {
		background: rgba(239, 170, 28, .3);
	}

	.userImg {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		background: #666;
	}

	::v-deep  .u-action-active {
		color: #fff;
	}

	.itemTips {
		position: absolute;
		left: 20rpx;
		top: 20rpx;
		background: #5C5FEF;
		border-radius: 20rpx;
		color: #fff;
		font-size: 22rpx;
		z-index: 100;
	}
</style>
